<!--
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<!-- box graph -->
<!--
    warning 일때 : type-warning 추가
    error 일때 : type-error 추가
-->
<!-- box graph -->
<!--
    warning 일때 : type-warning 추가
    error 일때 : type-error 추가
-->
<div class="ddp-box-graph type-memory ">
  <div class="ddp-icon-status2">
    <a href="javascript:" class="ddp-btn-link-go" (click)="showKpiChart(monitoringTarget.MEM)"></a>
  </div>
  <div class="ddp-box-label">Usage Memory</div>
  <!-- 아이콘 -->
  <div class="ddp-icon-status">
    <em class="ddp-icon-warning"></em>
    <em class="ddp-icon-error"></em>
  </div>
  <!-- //아이콘 -->
  <div #usageMemory style="position: absolute; bottom: 0; left: 0; right: 0; top:0; width: 100%; display: block;">
    <div class="ddp-data-empty" *ngIf="memoryEmpty">
      <span class="ddp-data-contents ">{{'msg.storage.ui.no.data' | translate}}</span>
    </div>
  </div>
  <!-- 그래프 영역 -->
  <div class="ddp-graph-round" >
    <div class="ddp-graph-in">
      <span class="ddp-data-num">{{heapMemory}}</span>
      <!-- <span class="ddp-data-per"><em class="ddp-icon-up"></em>10%</span> -->
    </div>
  </div>
  <!-- //그래프 영역 -->

</div>

<div class="ddp-wrap-line-graph">
  <!-- box graph -->
  <div class="ddp-box-graph type-count">
    <div class="ddp-box-label">GC Count</div>
    <!-- 아이콘 -->
    <div class="ddp-icon-status">
      <a href="javascript:" class="ddp-btn-link-go" (click)="showKpiChart(monitoringTarget.GC_COUNT)"></a>
    </div>
    <!-- //아이콘 -->
    <!-- 그래프 영역 -->
    <div #gcCount class="ddp-graph-line" style="width:100%;display: block;" >
      <div class="ddp-data-empty" *ngIf="gcCountEmpty">
        <span class="ddp-data-contents ">{{'msg.storage.ui.no.data' | translate}}</span>
      </div>
    </div>
    <!-- //그래프 영역 -->
  </div>
  <!-- //box graph -->
  <!-- box graph -->
  <div class="ddp-box-graph type-count">
    <div class="ddp-box-label">Avg Query Time</div>
    <!-- 아이콘 -->
    <div class="ddp-icon-status">
      <a href="javascript:" class="ddp-btn-link-go" (click)="showKpiChart(monitoringTarget.QUERY_TIME)"></a>
    </div>
    <!-- //아이콘 -->
    <!-- 그래프 영역 -->
    <div #avgQueryTime class="ddp-graph-line" style="width:100%;display: block;" >
      <div class="ddp-data-empty" *ngIf="avgQueryTimeEmpty">
        <span class="ddp-data-contents ">{{'msg.storage.ui.no.data' | translate}}</span>
      </div>
    </div>
    <!-- //그래프 영역 -->
  </div>
  <!-- //box graph -->
</div>
<div class="ddp-wrap-num-graph">
  <!-- box graph -->
  <!--
     warning 일때 : type-warning 추가
 -->
  <div class="ddp-box-graph type-count-num ">
    <div class="ddp-box-label">Query Count</div>
    <!-- 아이콘 -->
    <div class="ddp-icon-status2">
      <a href="javascript:" class="ddp-btn-link-go" (click)="showKpiChart(monitoringTarget.QUERY_COUNT)"></a>
    </div>
    <!-- //아이콘 -->

    <!-- 그래프 영역 -->
    <div class="ddp-graph-num" > {{ queryCount | numberCommas}} </div>
    <!-- //그래프 영역 -->
  </div>
  <!-- //box graph -->
  <!-- box graph -->
  <div class="ddp-box-graph type-task ">
    <div class="ddp-box-label">Running Task</div>
    <!-- 아이콘 -->
    <!--
    <div class="ddp-icon-status">
      <em class="ddp-icon-error"></em>
    </div>
    -->
    <!-- //아이콘 -->
    <!-- 그래프 영역 -->
    <div class="ddp-graph-num" > {{ runningTaskCount | numberCommas }} </div>
    <!-- //그래프 영역 -->
  </div>
  <!-- //box graph -->
</div>

<div class="ddp-wrap-num-graph">
  <!--
      warning 일때 : type-warning 추가
  -->
  <div class="ddp-box-graph type-datasource type-warning">
    <div class="ddp-box-label">
      Datasource Count
      <!--<em class="ddp-icon-warning"></em> -->
    </div>

    <!-- 아이콘 -->
    <!--<div class="ddp-icon-status">
      <span class="ddp-data-per"><em class="ddp-icon-up"></em>10%</span>
    </div>-->
    <!-- //아이콘 -->
    <div class="ddp-graph-num">
      {{ datasourceCount | numberCommas }}
    </div>

  </div>
  <!-- //box graph -->

  <div class="ddp-box-graph type-segment ">
    <div class="ddp-box-label">
      Segment Count
      <em class="ddp-icon-warning"></em>
    </div>


    <div class="ddp-graph-num">
      {{ segmentCount | numberCommas }}
    </div>

  </div>
  <!-- //box graph -->
</div>

